<template>
    <div id='myApp'>
        <Row style="margin-bottom: 10px;border-bottom: 1px solid #eeeeee;">
            <Col span="6" style="border-bottom:2px solid #2d8cf0 ;padding: 0 0 8px 18px;">
            <span style="color: #2d8cf0;">
                <Icon type="md-add-circle" />&nbsp;&nbsp;
                <span style="color: black;">数据管理&nbsp;&nbsp;>&nbsp;&nbsp;</span>
                SQL任务列表
            </span>
            </Col>
        </Row>
        <Row style="margin-bottom: 20px;">
            <Col span="18">
                <Input style="width:410px" v-model="sqlName" placeholder="请输入标题名称进行模糊查询" />
                <Button type="primary" @click="getDataList(1)">
                    <Icon type="ios-search" />
                </Button>
            </Col>
            <Col span="6" offset="8">
                <div style="float: right;">
                    <!-- <Button type="text" @click="search" style="color: #2d8cf0;">
                        高级搜索
                    </Button> -->
                    <!-- <Button>
                        导出<Icon type="md-download"></Icon>
                    </Button> -->
                </div>  
            </Col>
        </Row>


        <Table :columns="httpColumns" :data="httpData"></Table>
        <div style="float: right; margin-top: 15px">
            <Page :total="dataCount" :page-size="condition.pageSize" show-total class="paging" @on-change="getDataList"
                @on-page-size-change="pages" show-elevator ></Page>
        </div>
        <Modal v-model="modal1" width="900">
            <p slot="header" style="color: #2d8cf0;">
                <Icon type="ios-information-circle"></Icon>
                <span>修改SQL任务</span>
            </p>
            <Form ref="formValidate" :rules="ruleValidate" :model="formItems" :label-width="150">
                        <FormItem prop="sqlName" label="SQL任务名称：">
                            <Input v-model="formItems.sqlName" disabled />
                        </FormItem>
                        <FormItem prop="withAPI" label="是否生成API：">
                            <div style="text-align: left;">
                                <i-switch v-model="formItems.withAPI" @on-change="changestatus" />
                            </div>
                        </FormItem>
                        <FormItem prop="sql" label="SQL语句：">
                                <!-- <Input type="textarea" :autosize="{minRows: 10,maxRows: 25}" v-model="formItems.sql" /> -->
                            <div class="editor_form" style="border: 1px solid #ccc;">
                                <codemirror
                                  ref="myCm"
                                  v-model="formItems.sql"
                                  :options="cmOptions"
                                  class="code">
                                </codemirror>
                            </div>
                        </FormItem>
                    </Form>
            <div slot="footer">
                <Button type="primary" @click="saveSql">保存</Button>
            </div>
        </Modal>
    </div>
    </div>
</template>
<style type="text/css">
.editor_form .CodeMirror{font-size:14px!important;line-height: 1.5!important;}
</style>
<script>
import zmitiUtil from '../../lib/util'
import { mapState, mapActions } from 'vuex'
import { codemirror } from 'vue-codemirror'
import "codemirror/theme/ambiance.css";
import "codemirror/lib/codemirror.css";
import "codemirror/addon/hint/show-hint.css";
require("codemirror/lib/codemirror");
require("codemirror/addon/edit/matchbrackets");
require("codemirror/addon/selection/active-line");
require("codemirror/mode/sql/sql");
require("codemirror/addon/hint/show-hint");
require("codemirror/addon/hint/sql-hint");

    export default {
        computed: {
            codemirror() {
                return this.$refs.myCm.codemirror
            },
            ...mapState({
                Authorization: state => state.Authorization
            })
        },
        components:{
            codemirror
        },
        data() {
            return {
                formItems:{
                    sqlName:'',
                    withAPI:false,
                    sql:''
                },
                ruleValidate: {
                    sqlName: [
                        { required: true, message: '任务名称不能为空', trigger: 'blur' }
                    ],
                    sql: [
                        { required: true, message: 'SQL语句不能为空', trigger: 'blur' }
                    ]
                },
                modal1: false,
                dataCount: 0,
                condition:{
                    pageSize:10,
                    pageNO:0
                },
                ajaxHttpData: [],
                xia: 0,
                sqlQueryData:[],
                httpColumns: [
                    {
                        title: '编号',
                        key: 'id',
                        width:230,
                        align: 'center'

                    },
                    {
                        title: 'SQL任务名称',
                        key: 'sqlName',
                        align: 'center'
                    },
                    {
                        title: '是否生成API',
                        key: 'withAPI',
                        width: 120,
                        align: 'center',
                        render:(h,params)=>{
                            return h('div',params.row.withAPI==true?'是':'否')
                        }
                    },
                    {
                        title: '最近修改时间',
                        key: 'date',
                        align: 'center',
                        render:(h,params)=>{
                            return h('div',zmitiUtil.DateFormatter(params.row.date))
                        }
                    },
                    
                    {
                        title: '操作',
                        // key: 'operate',
                        width: 210,
                        align: 'center',
                        render: (h, params) => {
                          const row = params.row;
                          return h('div', [ 
                            h('Button', {
                              props: {
                                size: 'small', 
                                type:'text'
                              },
                              style: {
                                marginRight: '5px',
                                color:'#2d8cf0'
                              },
                              on: {
                                click: () => {
                                    // 编辑操作
                                    this.openmodal(params.row);
                                }
                              }
                            }, '修改'),
                            h('Button', {
                              props: {
                                size: 'small', 
                                type:'text'
                              },
                              style: {
                                marginRight: '5px',
                                color:'#2d8cf0'
                              },
                              on: {
                                click: () => {
                                    // 执行操作
                                    this.exeSql(params.row.sql)
                                }
                              }
                            }, '执行'),
                            h('Button', {
                              props: {
                                size: 'small', 
                                type:'text'
                              },
                              style: {
                                marginRight: '5px',
                                color:'#2d8cf0'
                              },
                              on: {
                                click: () => {
                                  //发布操作
                                  this.addApi(params.row.sql)
                                }
                              }
                            }, '发布API')
                          ]);
                        }
                      }

                ],
                httpData: [],
                sqlQueryData:[],
                sqlName:'',
                curCode:'',
                cmOptions:{
                    value:'',
                    mode: 'text/x-mariadb',
                    indentWithTabs: false,
                    autoRefresh: true,
                    smartIndent: true,
                    lineNumbers: true,
                    matchBrackets: true,
                    extraKeys: {'Ctrl': 'autocomplete'},//自定义快捷键
                    hintOptions: {//自定义提示选项
                        tables: {
                          users: ['name', 'score', 'birthDate'],
                          countries: ['name', 'population', 'size']
                        }
                    }
                }
            }
        },
        mounted() {
            this.getDataList(1);
        },
        methods: {
            changestatus(status){//是否生成API
                this.formItems.withAPI=status;                
                console.log(status,'status');
            },
            pages(num) { //修改每页显示条数时调用
                this.pageSize = num;
                this.getDataList(1);
            },
            // 获取SQL任务列表，待修改
            getDataList(index) {
                var _this = this;
                //index当前页码
                console.log('index = ' + index)
                var path='sql/list';
                var postData = {//参数
                    sqlName:_this.sqlName,
                    pageSize:_this.condition.pageSize,
                    pageNO:index
                }
                zmitiUtil.Ajax(path,postData).then(res => {
                    var data = res.data; 
                    console.log(data,'获取数据源')              
                    if (data.results) {                        
                        _this.httpData=data.results;
                        _this.dataCount=data.total;
                    }
                }).catch((error) => {
                    console.log(error,'error');
                });
            },
            openmodal(item){
                this.modal1=true;
                console.log(item,'item')
                this.formItems={
                    sqlName:item.sqlName,
                    withAPI:item.withAPI,
                    sql:item.sql
                }
            },
            saveSql(){//修改sql
                let _this = this;
                var path='sql/modify';
                var postData = _this.formItems;
                _this.$refs['formValidate'].validate((valid) => {
                    if (valid) {
                        zmitiUtil.Ajax(path,postData).then(res => {
                            var data = res.data; 
                            console.log(data,'获取数据源');
                            if (data.code==1) {                        
                                _this.$Message.success('修改成功!');
                                _this.modal1=false;
                                this.getDataList(1);
                            }else{
                                _this.$Message.error(data.result);
                            }
                        }).catch((error) => {
                            console.log(error,'error');
                        });
                    }
                })
            },
            exeSql(sqlstr){//前往执行sql语句页面,并附带sql语句
                this.$router.push('/sqlSearch');
                this.$store.state.sqlstr=sqlstr;
            },
            addApi(sqlstr){//前往发布API页面,并附带sql语句
                this.$router.push('/postAPI');
                this.$store.state.sqlstr=sqlstr;
            }
        },
        created() {

        }
    }
</script>